<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播客上传声音</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li
          v-for="(item,index) in voicelist"
          @click="currentVoiceIndex=index"
          :class="{active:currentVoiceIndex===index}"
        >
          <img :src="item.coverUrl" style="width: 50px; width: 50px" />
          <ul>
            <li v-for="(item2,index) in item.voiceListData">
              {{item2.voiceName}}
            </li>
          </ul>
          {{item.voiceListName}}
        </li>
      </ul>
      <input v-model="songName" placeholder="请输入声音名称" />
      <input v-model="description" placeholder="请输入介绍" />
      <input type="file" name="songFile" />
      <button @click="submit">上传</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            songName: '',
            description: '',
            voicelist: [],
            cookieToken: '',
            currentVoiceIndex: 0,
          }
        },
        created() {
          this.getData()
        },
        computed: {
          currentVoice() {
            // {
            //   voiceListId: '',
            //   coverImgId: '',
            //   categoryId: '',
            //   secondCategoryId: '',
            // }
            return this.voicelist[this.currentVoiceIndex]
          },
        },
        methods: {
          submit() {
            console.log('submit')
            const file = document.querySelector('input[type=file]').files[0]
            this.upload(file)
          },
          async login() {
            const phone = '' // 这里填手机号
            const password = '' // 这里填密码
            const fileUpdateTime = {}
            let fileLength = 0
            if (!phone || !password) {
              const msg = '请设置你的手机号码和密码'
              alert(msg)
              throw new Error(msg)
            }

            const res = await axios({
              url: `/login/cellphone`,
              method: 'post',
              data: {
                phone,
                password,
              },
            })
            this.cookieToken = res.data.cookie
          },
          async getData() {
            await this.login()
            const res = await axios({
              url: `/voicelist/search?cookie=${this.cookieToken}`,
            })

            console.log(res.data.data)
            this.voicelist = res.data.data.list
            this.voicelist.map(async (i) => {
              const res2 = await axios({
                url: `/voicelist/list?voiceListId=${i.voiceListId}&limit=5`,
              })
              i.voiceListData = res2.data.data.list
              console.log(res2)
            })
          },
          upload(file) {
            var formData = new FormData()
            formData.append('songFile', file)
            axios({
              method: 'post',
              url: `/voice/upload?time=${Date.now()}&cookie=${
                this.cookieToken
              }&songName=${this.songName}&voiceListId=${
                this.currentVoice.voiceListId
              }&categoryId=${this.currentVoice.categoryId}&coverImgId=${
                this.currentVoice.coverImgId
              }&secondCategoryId=${
                this.currentVoice.secondCategoryId
              }&description=${this.description}&privacy=1`,
              headers: {
                'Content-Type': 'multipart/form-data',
              },
              data: formData,
            })
              .then((res) => {
                alert(`${file.name} 上传成功`)
                if (currentIndx >= fileLength) {
                  console.log('上传完毕')
                }
              })
              .catch(async (err) => {
                console.log(err)
              })
          },
        },
      }).mount('#app')
    </script>

    <style>
      ul li {
        cursor: pointer;
      }

      ul li.active {
        color: red;
      }
    </style>
  </body>
</html>
